<template>
  <div class="product-wrapper home-section">
    <div class="product-content">
      <div class="section-title">
        <h1 class="title-main">优质商品</h1>
        <p class="title-tips">行业热门商品一键直达</p>
      </div>
      <div class="section">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="原辅料采购" name="0"></el-tab-pane>
          <el-tab-pane label="食品机械" name="1"></el-tab-pane>
          <el-tab-pane label="仓储物流" name="2"></el-tab-pane>
          <el-tab-pane label="食品安全" name="3"></el-tab-pane>
        </el-tabs>
        <div class="product-section">
          <div v-for="item in 10" :key="item" class="product">
            <div class="product-img">
              <img src="@/assets/home/product.jpeg" alt="" />
            </div>
            <div class="product-name">干辣椒中辣农家干红海椒灯笼椒商用火锅底料调味干辣椒</div>
            <div class="product-price">¥ <span>2000</span></div>
          </div>
        </div>
        <div class="more">查看更多</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: '0',
      serviceModelList: [
        {
          name: '一批食品通用机械设备',
          title: '内容内容内容内容内容',
          updateTime: '2021/07/23 15:21',
          type: '· 标题标题标题标题标题标题标题标题标题标题 — 公告类型'
        },
        {
          name: '安徽老乡鸡餐饮股份有限公司——鸡苗供应',
          title: '内容内容内容内容内容',
          updateTime: '2021/07/23 15:21',
          type: '· 标题标题标题标题标题标题标题标题标题标题 — 公告类型'
        },
        {
          name: '大华2021年新总部原材料采购',
          title: '内容内容内容内容内容',
          updateTime: '2021/07/23 15:21',
          type: '· 标题标题标题标题标题标题标题标题标题标题 — 公告类型'
        },
        {
          name: '重庆食品科技公司需要食品检验',
          title: '内容内容内容内容内容',
          updateTime: '2021/07/23 15:21',
          type: '· 标题标题标题标题标题标题标题标题标题标题 — 公告类型'
        },
        {
          name: '大华科技需要一个100m²常温仓库',
          title: '内容内容内容内容内容',
          updateTime: '2021/07/23 15:21',
          type: '· 标题标题标题标题标题标题标题标题标题标题 — 公告类型'
        },
        {
          name: '生物科技公司需要微生物检测服务',
          title: '内容内容内容内容内容',
          updateTime: '2021/07/23 15:21',
          type: '· 标题标题标题标题标题标题标题标题标题标题 — 公告类型'
        }
      ]
    }
  },
  methods:{
    handleClick (name) {
      console.log(name)
    }
  }
}
</script>

<style scoped lang='scss'>
@import "@/style/color.scss";
.product-wrapper {
  background-color: #fff;
}
.product-content {
  width: $bigWidth;
  margin: 0 auto;;
}
::v-deep .el-tabs__nav-scroll {
  display: flex;
  justify-content: center;
}
::v-deep .el-tabs__nav-wrap::after {
  display: none;
}
::v-deep .el-tabs__active-bar {
  background-color: $greenColor;
}
::v-deep .el-tabs__item {
  height: 30px;
  line-height: 30px;
  color: #666666;
}
::v-deep .el-tabs__item:hover,
::v-deep .el-tabs__item.is-active {
  color: $greenColor;
}
.product-section {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}
.product {
  width: calc(20% - 16px);
  height: 310px;
  background: #FAFAFA;
  margin-right: 20px;
  margin-bottom: 20px;
  .product-img {
    width: 100%;
    height: 205px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .product-name {
    padding: 15px;
    font-size: 14px;
    line-height: 18px;
    color: #333333;
  }
  .product-price {
    padding: 0 15px;
    color: $greenColor;
    span {
      font-size: 18px;
    }
  }
}
.product:nth-child(5n) {
  margin-right: 0px
}
.more {
  width: 120px;
  height: 26px;
  border-radius: 13px;
  background-color: rgba(153, 153, 153, 0.15);
  margin: 20px auto 0;
  font-size: 14px;
  color: #666666;
  text-align: center;
  line-height: 26px;
  cursor: pointer;
}
</style>
